<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>报餐统计</title>
	<link rel="stylesheet" href="../css/common2.css">
	<style scoped>
		.hut_but_tz {
			display: inline-block;
			height: 38px;
			width: 108px;
			line-height: 38px;
			padding: 0 18px;
			background: url(../image/enter.png) no-repeat center center;
			color: #fff;
			white-space: nowrap;
			text-align: center;
			font-size: 14px;
			border: none;
			border-radius: 2px;
			cursor: pointer;
		}

		.search_box {
			display: flex;
			align-items: center;
		}

		.search_left {
			display: flex;
			align-items: center;
			margin-right: 30px;
		}

		.select_s {
			width: 100px;
			height: 35px;
			border: none;
			margin-right: 5px;
		}

		.search_name {
			height: 35px;
			max-width: 135px;
			padding: 0 5px;
			margin-right: 5px;
		}

		.table {
			width: 99%;
		}

		.four {
			width: auto;
		}

		.search {
			width: 15vw;
			max-width: 140px;
			height: 35px;
			padding-left: 10px;
			font-size: 14px;
			color: #686868;
			position: absolute;
			left: 20px;
			border: 1px solid;
			display: inline-block;
		}

		.search1 {
			height: 35px;
			max-width: 135px;
			padding: 0 5px;
			margin-right: 5px;
		}
	</style>
</head>

<body class="main-body">
	<div id="vue-root" style="margin-top:50px;">
		<div class="search_box">
			<div class="search_left">
				<select v-model="search.type" class="select_s">
					<option :value="undefined">全部</option>
					<option :value="1">午餐</option>
					<option :value="2">晚餐</option>
				</select>
				<input class="search_name" placeholder="请输入姓名（学员/老师）" v-model="search.name">

				<input placeholder="选择日期" readonly class="search1" v-model="date" id="Time" />

				<img src="../image/search.png" height="35" width="35" class="search_img" @click="getData0">
			</div>
			<div class="refresh" onclick="location.reload()" style="display: inline-block;">刷新</div>
		</div>
		<div class="table ">
			<table class="table_top">
				<thead>
					<tr>
						<th class="two">序号</th>
						<th>校区</th>
						<th>学员姓名</th>
						<th class="two">已报餐食午餐未收费</th>
                        <th class="two">已报餐食晚餐未收费 </th>
                        <th>查看/操作</th>
						
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(item,index) in list">
						<td style="width: 100px"><span v-text="index+1"></span></td>
						<td class="four" v-text="item.schoolName"></td>
						<td class="four" v-text="item.name"></td>
						<td class="four" v-text="item.totalLunch"></td>
						<td class="four" v-text="item.totalDinner"></td>
						<td>
							<a :href="'/student_meal.html?id='+item.studentId" class="btn"
								style="padding: 8px 16px; background-color: #69bbf4; color: white; text-decoration: none; border-radius: 4px;" v-if="able.edit">查看/操作</a>
						</td>
					
					</tr>
				</tbody>
			</table>
		</div>

		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum&#45;&#45;">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>

		</ul>
		<div style="float: right;margin-bottom: 20px;">
			总共{{total}}条记录
			<select class="ui-select init" style="height:32px" v-model="pageSize">
				<option :value="10">每页10条</option>
				<option :value="30">每页30条</option>
				<option :value="100">每页100条</option>
			</select>
		</div>

	</div>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>
	<script src="/js/auth_util.js"></script>

	<script>
	function days(date) {
				var day = new Date(date).getDay(), a = [], i;
				date = dayjs(new Date(date));
				if (day == 0) day = 7;
				for (i = 1 - day; i < 8 - day; i++)
					a.push(date.add(i, 'day').format('YYYY-MM-DD'));
				return a;
			}
		var app = new Vue(merge({
			data: {
				date: dayjs().format('YYYY-MM-DD'),
				urls: {
				},


			},
			created: function () {

				this.search.date = this.date
				this.urls.list = '/pc/mealReservation/getMealCount?agentId=' + top_params().id;
				this.urls.imports = '/pc/mealReservation/import/' + top_params().id;
				abled('expensemanagement', this);
				this.getData();

			},
			methods: {
				
			},
			computed: {
				dates: function () {
					return days(this.date);
				}
			},

		}));
		laydate.render({
				elem: '#Time',
				format: 'yyyy-MM-dd',
				done: function (value) {
					app.date = value;
					app.search.date = value; // 同步更新搜索条件中的日期
					app.getData();
				}
			});
		
	</script>


</body>

</html>